<template>
		<view class="content">
			<view class="nav">
				<!-- 选项卡水平方向滑动，scroll-with-animation是滑动到下一个选项时，有一个延时效果 -->
				
				<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
					<view class="tab-scroll_box">
						<!-- 选项卡类别列表 -->
						<view class="tab-scroll_item" v-for=" (item,index) in category" :key="index"  :class="{'active':isActive==index}" @click="chenked(index)">
								{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 选项卡内容轮播滑动显示，current为当前第几个swiper子项 -->
			<swiper @change="change" :current="isActive" class="swiper-content" :style="fullHeight">
				<swiper-item class="swiperitem-content">
					<scroll-view scroll-y style="height: 100%;">
						
					<view class="nav_item" >
						111111111111
						<uni-section title="运动" type="line">
							
									<uni-card :cover="cover1" @click="onClick">
										<!-- <image slot='cover' style="width: 100%;" :src="cover"></image> -->
										<text class="uni-body">{{indices[0].text}}</text>
										<view slot="actions" class="card-actions">
											<view class="card-actions-item"  @click="actionsClick('分享')">
												<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
												<text class="card-actions-item-text">分享</text>
											</view>
											<view class="card-actions-item" @click="actionsClick('点赞')">
												<uni-icons type="heart" size="18" color="#999"></uni-icons>
												<text class="card-actions-item-text">点赞</text>
											</view>
											<view class="card-actions-item" @click="actionsClick('评论')">
												<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
												<text class="card-actions-item-text">评论</text>
											</view>
										</view>
									</uni-card>
								</uni-section>	
					</view>
								
					</scroll-view>	
				</swiper-item>
				<swiper-item class="swiperitem-content">
					<scroll-view scroll-y style="height: 100%;">
						<view class="nav_item" >
						<uni-section title="钓鱼" type="line">
									<uni-card :cover="cover2" @click="onClick">
										<!-- <image slot='cover' style="width: 100%;" :src="cover"></image> -->
										<text class="uni-body">{{indices[3].text}}</text>
										<view slot="actions" class="card-actions">
											<view class="card-actions-item"  @click="actionsClick('分享')">
												<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
												<text class="card-actions-item-text">分享</text>
											</view>
											<view class="card-actions-item" @click="actionsClick('点赞')">
												<uni-icons type="heart" size="18" color="#999"></uni-icons>
												<text class="card-actions-item-text">点赞</text>
											</view>
											<view class="card-actions-item" @click="actionsClick('评论')">
												<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
												<text class="card-actions-item-text">评论</text>
											</view>
										</view>
									</uni-card>
								</uni-section>	
						</view>
					</scroll-view>	
				</swiper-item>
				<swiper-item class="swiperitem-content">
					<scroll-view scroll-y style="height: 100%;">
						<view class="nav_item" >
							
							<uni-section title="洗车" type="line">
										<uni-card :cover="cover3" @click="onClick">
											<!-- <image slot='cover' style="width: 100%;" :src="cover"></image> -->
											<text class="uni-body">{{indices[1].text}}</text>
											<view slot="actions" class="card-actions">
												<view class="card-actions-item"  @click="actionsClick('分享')">
													<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
													<text class="card-actions-item-text">分享</text>
												</view>
												<view class="card-actions-item" @click="actionsClick('点赞')">
													<uni-icons type="heart" size="18" color="#999"></uni-icons>
													<text class="card-actions-item-text">点赞</text>
												</view>
												<view class="card-actions-item" @click="actionsClick('评论')">
													<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
													<text class="card-actions-item-text">评论</text>
												</view>
											</view>
										</uni-card>
									</uni-section>	
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiperitem-content">
					<scroll-view scroll-y style="height: 100%;">
						<view class="nav_item" >
							
							<uni-section title="旅游" type="line">
										<uni-card :cover="cover4" @click="onClick">
											<!-- <image slot='cover' style="width: 100%;" :src="cover"></image> -->
											<text class="uni-body">{{indices[5].text}}</text>
											<view slot="actions" class="card-actions">
												<view class="card-actions-item"  @click="actionsClick('分享')">
													<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
													<text class="card-actions-item-text">分享</text>
												</view>
												<view class="card-actions-item" @click="actionsClick('点赞')">
													<uni-icons type="heart" size="18" color="#999"></uni-icons>
													<text class="card-actions-item-text">点赞</text>
												</view>
												<view class="card-actions-item" @click="actionsClick('评论')">
													<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
													<text class="card-actions-item-text">评论</text>
												</view>
											</view>
										</uni-card>
									</uni-section>	
						</view>
					</scroll-view>	
				</swiper-item>
			</swiper>
		</view>
					
			
</template>

<script>
	const APIKEY = '7cc94edca9f74113adc43d1822d933c0' ;// 填入你申请的KEY
	export default {
		watch:{
			// swiper与上面选项卡联动
			currentindex(newval){
				this.isActive = newval;
				this.scrollLeft = 0;
				// 滑动swiper后，每个选项距离其父元素最左侧的距离
				for (let i = 0; i < newval - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
		},
		data() {
			return {
				currenttime:'',
					location: '',
					type:'',
					now: '',
					hourly: '',
					daily: '',
					City: '',
					County: '',
				tempMax:'',
				tempMin:'',
				warn:'',
				indices:[],
				cover1: 'https://img0.baidu.com/it/u=3755266098,4096798108&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=380',
				cover2: 'https://img.zcool.cn/community/01cc68612658d811013f47200dddbd.jpg@1280w_1l_2o_100sh.jpg',
				cover3:'https://img0.baidu.com/it/u=3148750722,2592742629&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=300',
				cover4:'https://img0.baidu.com/it/u=2521422368,3416318358&fm=253&fmt=auto&app=138&f=JPEG?w=707&h=500',
								avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
								extraIcon:{
									color: '#4cd964',
									size: '22',
									type: 'gear-filled'
								},
							
				 user: uni.getStorageSync('weather2024'),
				isActive: 0,
					index: 0,
					currentindex:0,
					category:[
						{
							id:1,
							name:'运动',
						},
						{
							id:2,
							name:'钓鱼',
						},
						{
							id:3,
							name:'洗车',
						},
						{
							id:4,
							name:'旅游',
						},
						
					],
					contentScrollW: 0, // 导航区宽度
					scrollLeft: 0, // 横向滚动条位置
					fullHeight:"",	
				
			}
		},
		  mounted() {
		  	var that = this;
		  	 //获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
		  	uni.getSystemInfo({
		  	      success: function (res) {
		  		         that.fullHeight ="height:" + res.windowHeight + "px";
		  		  }
		  		});
		  	// 获取标题区域宽度，和每个子元素节点的宽度
		  	this.getScrollW()
		  },
			onLoad() {
				this.getLocation();
				
				},	  
		created(){
		wx.showShareMenu({
			withShareTicket:true,
			menus:['shareAppMessage','shareTimeline']
		});	
		},
		onShareAppMessage(res){
			return{
				title: this.title,
				imageUrl:this.thumb
			}
		},
		onShareTimeline(res){
			return{
				title: this.title,
				imageUrl:this.thumb
			}
		},
		onShow(){
			  this.user= uni.getStorageSync('weather2024')
		},
		methods: {
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab-scroll').boundingClientRect(data => {
					  // 拿到 scroll-view 组件宽度
					  this.contentScrollW = data.width
				 }).exec();
				 query.selectAll('.tab-scroll_item').boundingClientRect(data => {
					 let dataLen = data.length;
					  for (let i = 0; i < dataLen; i++) {
						  //  scroll-view 子元素组件距离左边栏的距离
						  this.category[i].left = data[i].left;
						 //  scroll-view 子元素组件宽度
						 this.category[i].width = data[i].width
					}
				 }).exec()
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(index) {
				this.isActive = index;
				this.scrollLeft = 0;
				for (let i = 0; i < index - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
			// swiper滑动时，获取其索引，也就是第几个
			change(e){
				const {current} = e.detail;
				this.currentindex = current;
			},	
			onClick(e){
							console.log(e)
						},
						actionsClick(text){
							uni.showToast({
								title:text,
								icon:'none'
							})
						},
			/**
			 * 获取定位
			 */
			getLocation() {
				var that = this;
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						that.location = res.longitude + ',' + res.latitude;
						that.getWeather();
						that.getCityByLoaction();
						that.getWeatherIndices();
						},
					fail(err) {
						uni.showModal({
							title: '获取定位信息失败',
							content: '为了给您提供准确的天气预报服务,请在设置中授权【位置信息】',
							success(mRes) {
								if (mRes.confirm) {
									uni.openSetting({
										success: function (data) {
											if (data.authSetting['scope.userLocation'] === true) {
												uni.showToast({
													title: '授权成功',
													icon: 'success',
													duration: 1000
												});
												that.getLocation();
											} else {
												uni.showToast({
													title: '授权失败',
													icon: 'none',
													duration: 1000
												});
												that.location = '地理位置';
												that.getWeather();
												that.getCityByLoaction();
											}
										},
										fail(err) {
											console.log(err);
											uni.showToast({
												title: '唤起设置页失败，请手动打开',
												icon: 'none',
												duration: 1000
											});
											that.location = '地理位置';
											that.getWeather();
											that.getCityByLoaction();
										}
									});
								} else if (mRes.cancel) {
									that.location = '地理位置';
									that.getWeather();
									that.getCityByLoaction();
								}
							}
						});
					}
				});
			},
			/**
			 * 根据坐标获取城市信息
			 */
			getCityByLoaction() {
				var that = this;
				uni.request({
					url:
						'https://geoapi.qweather.com/v2/city/lookup?key=' +
						APIKEY +
						'&location=' +
						that.location,
					success(result) {
						var res = result.data;
						if (res.code == '200') {
							var data = res.location[0];
							that.City = data.adm2;
							that.County = data.name;
						} else {
							uni.showToast({
								title: '获取城市信息失败',
								icon: 'none'
							});
						}
					}
				});
			},
			/**
			 * 获取天气
			 */
			getWeather() {
				var that = this;
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					url:
						'https://devapi.qweather.com/v7/weather/now?key=' +
						APIKEY +
						'&location=' +
						that.location,
					success(result) {
						var res = result.data;
						that.now = res.now;
					}
				});
				uni.request({
					url:
						'https://devapi.qweather.com/v7/weather/24h?key=' +
						APIKEY +
						'&location=' +
						that.location,
					success(result) {
						var res = result.data;
						res.hourly.forEach(function (item) {
							item.time = that.formatTime(new Date(item.fxTime)).hourly;
						});
						that.hourly = res.hourly;
					}
				});
				uni.request({
					url:
						'https://devapi.qweather.com/v7/weather/7d?key=' +
						APIKEY +
						'&location=' +
						that.location,
					success(result) {
						var res = result.data;
						res.daily.forEach(function (item) {
							item.date = that.formatTime(new Date(item.fxDate)).daily;
							item.dateToString = that.formatTime(new Date(item.fxDate)).dailyToString;
						});
						that.tempMax=res.daily[0].tempMax;
						that.tempMin=res.daily[0].tempMin;
						
						that.daily = res.daily;
						uni.hideLoading();
					}
				});
			},
			getWeatherIndices(){
				var that = this;
				uni.request({
					url:
						'https://devapi.qweather.com/v7/indices/1d?key=' +
						APIKEY + 
						'&location=' +that.location+'&type=0',
						success(result){
							
							var res=result.data;
							
							that.indices=res.daily;
							uni.hideLoading();
						}
				});
			},
			// 格式时间
			formatTime(date) {
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const hour = date.getHours();
				const minute = date.getMinutes();
				const second = date.getSeconds();
				const weekArray = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				const isToday = date.setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0);
				return {
					hourly: [hour, minute].map(this.formatNumber).join(':'),
					daily: [month, day].map(this.formatNumber).join('-'),
					dailyToString: isToday ? '今天' : weekArray[date.getDay()]
				};
			},
			// 补零
			formatNumber(n) {
				n = n.toString();
				return n[1] ? n : '0' + n;
			}			
						
		}
	}
</script>

<style lang="scss">

		.card-actions-item {
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.card-actions-item-text {
				font-size: 12px;
				color: #666;
				margin-left: 5px;
			}
				.custom-cover {
					flex: 1;
					flex-direction: row;
					position: relative;
				}
			
				.cover-content {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					height: 40px;
					background-color: rgba($color: #000000, $alpha: 0.4);
					display: flex;
					flex-direction: row;
					align-items: center;
					padding-left: 15px;
					font-size: 14px;
					color: #fff;
				}
			
				.card-actions {
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					align-items: center;
					height: 45px;
					border-top: 1px #eee solid;
				}
				.card-actions-item-text {
						font-size: 12px;
						color: #666;
						margin-left: 5px;
					}
				.cover-image {
						flex: 1;
						height: 150px;
					}
					.no-border {
						border-width: 0;
					}
					page{
						height: 100%;
						display: flex;
						
					}
					.content{
						display: flex;
						flex-direction: column;
						width: 100%;
						flex: 1;
						.nav{
							border-top: 1rpx solid #f2f2f2;
							
							position: fixed;
							z-index: 99;
							width: 100%;
							align-items: center;
							height: 100rpx;
							.tab-scroll{
								flex: 1;
								overflow: hidden;
								box-sizing: border-box;
								padding-left: 30rpx;
								padding-right: 30rpx;
								.tab-scroll_box{
									display: flex;
									align-items: center;
									flex-wrap: nowrap;
									box-sizing: border-box;
									.tab-scroll_item{
										line-height: 60rpx;
										margin-right: 35rpx;
										flex-shrink: 0;
										padding-bottom:10px;
										display: flex;
										justify-content: center;
										font-size: 16px;
										padding-top: 10px;
									}
								}
							}
						}
						.swiper-content{
							   padding-top: 120rpx;
							   flex: 1;
							.swiperitem-content{
							   
								.nav_item{	
									
									padding:20rpx 40rpx 0rpx 40rpx ;
								}
							}
						}	
					}
					.active {
						position: relative;
						color: #ff0000;
						font-weight: 600;
					}
					.active::after {
						content: "";
						position: absolute;
						width: 130rpx;
						height: 4rpx;
						background-color: #ff0000;
						left: 0px;
						right: 0px;
						bottom: 0px;
						margin: auto;
					}
					/* 隐藏滚动条，但依旧具备可以滚动的功能 */
					/deep/.uni-scroll-view::-webkit-scrollbar {
						display: none
					}
					
</style>
